<template>
	<div id="app">
		<vHeader></vHeader>
		<div class="main">
			<!--<div class="main-bg"></div>
			<div class="main-bg main-bg2"></div>-->
			<video class="VideoPane-video" src="https://cms.cnc.blzstatic.cn/cms/gallery/4G8KGRWWG7FS1557732437703.mp4" data-src="https://cms.cnc.blzstatic.cn/cms/gallery/4G8KGRWWG7FS1557732437703.mp4" loop="loop" muted="muted" autoplay="autoplay" playsinline="playsinline"></video>
			<router-view/>
		</div>
		<div class="footer">
			<p>滇ICP备18005556号-1</p>
		</div>
	</div>
</template>

<script>
	import vHeader from '@/components/vHeader.vue';
	export default {
		name: 'App',
		components: {
			vHeader
		}
	}
</script>

<style>
	.main {
		position: relative;
		min-height: calc(100vh - 20px);
	}
	.VideoPane-video {
		width: 100%;
		position: absolute;
	}
	.main-bg {
		height: 50%;
		background: url(../img/bg.jpg) no-repeat center;
		background-size: 100% 100%;
		background-attachment: fixed;
		min-height: 400px;
		position: absolute;
		width: 100%;
	}
	
	.img-bg {
		width: 100%;
		display: block;
	}
	
	.main-bg2 {
		background: url(../img/bg2.jpg) no-repeat center;
		background-size: 100% 100%;
		background-attachment: fixed;
		position: absolute;
		width: 100%;
		top: 50%;
	}
	
	.main-center {
		padding-top: 100px;
		width: 1000px;
		/*position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);*/
		display: flex;
		margin: 0 auto;
		position: relative;
	}
	
	.ivu-modal-wrap {
		z-index: 100000;
	}
	
	.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item {
		max-width: 50px;
		max-height: 50px;
	}
	
	.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item img {
		width: 100%;
		height: 100%;
	}
	
	.w-e-text-container .w-e-panel-container .w-e-panel-tab-title {
		flex-wrap: wrap;
	}
	
	.footer {
	    text-align: center;
	    color: #999;
	    padding: 4px 0;
	}
</style>